.bgall * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
}
.bgall a {
  text-decoration: none;
}

.bgall {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 1200px;
  height: 1680px;
  background-color: #CCDDFE;/*#CCDDFE*/
  position: absolute;
  top:0px;
  left:0px;
}

.topcontainer {
  position: relative;
  width: 1200px;
  height:620px;
  margin: 0 auto;
}
.topleft{
  position: absolute;
  top:0px;
  left:0px;
  width: 560px;
}

.topword{
  position: relative;
  margin: 0 auto;
  margin-top: 40px;
  width: 420px;
  border-top: solid 8px #3C1910;
  border-left: solid 8px #3C1910;
}
.topword .wz{
  font-size: 18px;
  color: #333333;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: 40px;
}
.topword .wz:nth-child(1){
  margin-top:10px;
}

.tittle{
  position: relative;
  width:420px;
  margin: 0 auto;
  margin-top: 20px;
}
.jutittle{
  font-size: 80px;
  line-height: 80px;
  line-height: 80px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-weight: bold;
  color: #3C1910;
}
.bottomline{
  position: absolute;
  width:200px;
  height:8px;
  background-color: #3C1910;
  opacity: 0.8;
  left:290px;
  top:85px;
}
.liheart{
  position: absolute;
  background: url(https://abscit.gitee.io/jutie/shmx/u58.png);
  background-size:50px 43px;
  height: 50px;
  width: 43px;
  background-repeat:no-repeat;
  right:-70px;
  top: 42px;
}

.heartbeat{
  position: relative;
  width: 100% ;
  margin-top:-50px;
  overflow-x: hidden;
  height:240px;
  background: url(https://abscit.gitee.io/jutie/shmx/HB700300.png);
  background-size:630px 270px;
  width: 630px;
  height: 270px;
  background-repeat:no-repeat;
  animation: kaboom 1s ease alternate infinite;
}

@keyframes kaboom {
  0% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.1);
  }
}

.julink{
  position: relative;
  width:500px;
  margin: 0 auto;
}
.julink span{
  display: inline-block;
  height: 60px;
  width: 140px;
  background-color: #CCD3DD;
  color: #333333;
  font-size: 18px;
  text-align: center;
  line-height: 60px;
  margin-left: 20px;
  box-shadow: 1px 1px 1px white;
}
.julink span:hover{
  border: white 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #4b60a1;
}

.julink a{
  text-decoration: none;
  color: #333333;
}

.topright{
  position: absolute;
  top:0px;
  left:560px;
  width:640px;
}
.juposter {
  position: relative;
  width: 560px;
  height: 560px;
  background:url(https://abscit.gitee.io/jutie/shmx/posterys.jpg );
  /*http://placekitten.com/560/560*/
  background-size:560px 560px;
  background-repeat:no-repeat;
  margin-top: 40px;
  border-top: solid 8px #3C1910;
  border-right: solid 8px #3C1910;
  box-shadow: 5px -5px 5px #666666;
}

.container{
  position: relative;
  width: 1200px;
  height: 360px;
  margin: 0 auto;
}
.colorblocks{
  position: relative;
  width:1080px;
  height: 320px;
  margin: 0 auto;
}
.block1{
  position: absolute;
  width: 360px;
  height: 210px;
  top: 0px;
  left:0px;
  background-color: #D5BBCA;
}
.block2{
  position: absolute;
  width: 720px;
  height: 120px;
  top: 90px;
  left: 360px;
  background-color: #CCD3DD;
}
.block3{
  position: absolute;
  width: 1080px;
  height: 110px;
  top: 210px;
  left: 0px;
  background-color: #D7C8CA;
}

.SClist{
  position: absolute;
  top:0px;
  left:60px;
  width: 1080px;
}

.Slist,.ClistL,.ClistR{
  display: inline-block;
  width: 355px;
}
.staff,.cast{
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  position: absolute;
}
.staff{
  top:-20px;
  left:80px;
}
.cast{
  left:440px;
  top:70px;
}
.Slist p,.ClistL p,.ClistR p{
  font-size: 16px;
  line-height: 32px;
  color: #333333;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.Slist p:nth-child(1){
  margin-top: 18px;
}

.edcontainer{
  position: relative;
  width: 1200px;
  height:500px;
  margin: 0 auto;
  margin-top: 20px;
}
.edleft{
  position: absolute;
  top: 0px;
  left:0px;
  width:550px;
  }
.edposter{
  position: relative;
  width: 480px;
  height: 490px;
  background:url(https://abscit.gitee.io/jutie/shmx/edposterys.jpg);
  /*http://placekitten.com/480/490*/
  background-size:480px 490px;
  background-repeat:no-repeat;
  margin-left: 70px;
  box-shadow: -5px -5px 5px #666666;
}

.edmid{
  position: absolute;
  top: 0px;
  left:550px;
  width:300px;
  }
  .latbg{
    position: relative;
    margin: 0 auto;
    width:240px;
    height:240px;
    background: radial-gradient(#4b60a1 50%, #CCDDFE 75%, white 99% );
    box-shadow: 0px 0px 10px 10px rgba(255,255,255,0.25);
    /*background-color: #4b60a1;*/
    border-radius: 120px;
  }
  .laternf{
    position: absolute;
    left:20px;
    top:45px;
  }

.edlinks{
  position: relative;
  width:460px;
  left:70px;
}
.edlinks p{
  height: 60px;
  width: 140px;
  margin:40px auto;
  background-color: #CCD3DD;
  color: #333333;
  font-size: 18px;
  text-align: center;
  line-height: 60px;
  margin-left: 10px;
  box-shadow: 1px 1px 1px white;
}
.edlinks p:hover{
border: white 1px solid;
box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
outline-color: rgba(255, 255, 255, 0);
outline-offset: 15px;
text-shadow: 1px 1px 2px #4b60a1;
}
.edlinks p a{
  text-decoration: none;
  color: #333333;
}

  .edright{
    position: absolute;
    top: 0px;
    left:850px;
    width:350px;
  }
  .edlist{
    position: relative;
    width:290px;
    height:220px;
    background-color: #D7C8CA;
    padding-top: 10px;
  }
  .edlist p{
    font-size: 16px;
    line-height: 28px;
    color: #333333;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    text-align: center;
  }
  .edlist p:nth-child(1){
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .edlyrics{
    position: relative;
    width:290px;
    height:270px;
    background-color:#D5BBCA;
    overflow-y: scroll;
    padding-bottom: 10px;
  }
  .edlyrics p{
    font-size: 15px;
    line-height: 25px;
    color: #333333;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    text-align: center;
  }
  .edlyrics p:nth-child(1){
    font-size: 22px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .shengming {
    position: relative;
    width: 1000px;
    margin: 20px auto;
  }
  .shengming p {
    text-align: center;
    color: #666666;
    font-size: 14px;
    line-height: 24px;
  }

.Slist p:nth-child(1):after{  content:"\539f\8457\ff1a\6843\4e4b\5e7a";  }
.Slist p:nth-child(2):after{  content:"\7b56\5212\ff1a\963f\7070\3010\9974\7cd6Y\00b7T\5de5\4f5c\5ba4\3011";  }
.Slist p:nth-child(3):after{  content:"\76d1\5236\ff1a\5343\4e09\5ae3\7136\3010\9974\7cd6Y\00b7T\5de5\4f5c\5ba4\3011";  }
.Slist p:nth-child(4):after{  content:"\7f16\5267\ff1a\6c88\6c90\3010\5b89\4e0e\591c\58f0\5de5\4f5c\5ba4\3011";  }
.Slist p:nth-child(5):after{  content:"\5bfc\6f14\ff1a\516d\6708\5bd2\5929\3010\522b\81f4\5de5\4f5c\5ba4\3011";  }
.Slist p:nth-child(6):after{  content:"\540e\671f\ff1a\6dc7\6dc7\5c0f\6c34\3010\6625\8272\60ca\9e3f\3011";  }
.Slist p:nth-child(7):after{  content:"\753b\624b\ff1a\626c\6c34\6f84\6c5f";  }
.Slist p:nth-child(8):after{  content:"PS\7f8e\5de5\ff1a\5c0f\7267\5e08\3010\7fbd\7ed8\97f3\3011";  }
.Slist p:nth-child(9):after{  content:"\5ba3\4f20\ff1a\8fb9\8fb9\3010\67d3\97f3\5de5\4f5c\5ba4\3011";  }

.ClistL p:nth-child(1):after{  content:"\590f\6d3a\ff1a\5c18\971c\6ee1\7738\3010\6625\8272\60ca\9e3f\3011";  }
.ClistL p:nth-child(2):after{  content:"\9646\5389\ff1a\6cab\751f\3010\98ce\6d41\9010\58f0\3011";  }
.ClistL p:nth-child(3):after{  content:"\5609\4f73\ff1a\9042\975e\3010\7fa4\97f3\8bf4\3011";  }
.ClistL p:nth-child(4):after{  content:"\9648\5929\ff1a\989c\5f8b\884c\3010\7fbd\843d\6709\58f0\3011";  }
.ClistL p:nth-child(5):after{  content:"\9ed1\65e0\5e38\ff1a\5c0f\5305\603b";  }
.ClistL p:nth-child(6):after{  content:"\767d\65e0\5e38\ff1a\7389\66dc\3010\4e94\97f3\9601\3011";  }

.ClistR p:nth-child(1):after{  content:"\8001\5e08\7532\ff1a\6c6a\5927\798f\3010\62fe\8bed\5de5\4f5c\5ba4\3011";  }
.ClistR p:nth-child(2):after{  content:"\8001\5e08\4e59\ff1a\6960\4fde\3010\7af9\537f\5de5\4f5c\5ba4\3011";  }
.ClistR p:nth-child(3):after{  content:"\6559\6388\7532\ff1a\597d\5c0f\7231\65b0\3010\5929\4f7f\5c4b\3011";  }
.ClistR p:nth-child(4):after{  content:"\548c\5c1a\ff1a\597d\5c0f\7231\65b0\3010\5929\4f7f\5c4b\3011";  }
.ClistR p:nth-child(5):after{  content:"\62a4\58eb\7532\ff1a\90c1\671b\68a6\59cb\3010\8fea\8fea\98de\9e3f\914d\97f3\7ec4\3011";  }
.ClistR p:nth-child(6):after{  content:"\5973\4eba\ff1a\8fdc\5c71\3010\671b\5929\6daf\5de5\4f5c\5ba4\3011";  }

.edlist p:nth-child(2):after{  content:"\539f\66f2\ff1a\300a\5fd8\8bb0\62e5\62b1\300b";  }
.edlist p:nth-child(3):after{  content:"\7b56\5212\ff1a\963f\7070\3010\9974\7cd6Y\00b7T\5de5\4f5c\5ba4\3011";  }
.edlist p:nth-child(4):after{  content:"\586b\8bcd\ff1a\82e5\7433\3010\6625\8272\60ca\9e3f\3011";  }
.edlist p:nth-child(5):after{  content:"\6f14\5531\ff1a\6614\67d3\3010\60ca\57ce\516d\6247\5899\3011";  }
.edlist p:nth-child(6):after{  content:"\540e\671f\ff1a\8c1c\5154";  }
.edlist p:nth-child(7):after{  content:"\6d77\62a5\ff1a\5c0f\7267\5e08\3010\7fbd\7ed8\97f3\3011";  }

.edlyrics p:nth-child(2):after{  content:"\feff\90a3\5929\53c8\66fe\662f\54ea\5929";  }
.edlyrics p:nth-child(3):after{  content:"\65e0\8a00\5374\80dc\8fc7\8bed\8a00";  }
.edlyrics p:nth-child(4):after{  content:"\4ee5\4e3a\662f\89c6\800c\4e0d\89c1";  }
.edlyrics p:nth-child(5):after{  content:"\5374\53d1\73b0\662f\518d\4e0d\76f8\89c1";  }

.edlyrics p:nth-child(7):after{  content:"\8fde\7ebf\662f\70b9\8fde\6210\7ebf";  }
.edlyrics p:nth-child(8):after{  content:"\4e00\773c\662f\6700\540e\4e00\773c";  }
.edlyrics p:nth-child(9):after{  content:"\4f60\5c31\5728\6211\9762\524d";  }
.edlyrics p:nth-child(10):after{  content:"\6211\5374\53ea\80fd\60f3\5ff5";  }

.edlyrics p:nth-child(12):after{  content:"\4ed6\53ea\5728\5fc3\4e0a";  }
.edlyrics p:nth-child(13):after{  content:"\4ed6\53ea\662f\4fe1\4ef0";  }
.edlyrics p:nth-child(14):after{  content:"\4ed6\53ea\662f\4e00\4e2a\4eba\8d70";  }
.edlyrics p:nth-child(15):after{  content:"\5728\54ea\4e2a\5730\65b9\6d41\6d6a";  }
.edlyrics p:nth-child(16):after{  content:"\5ff5\4ed6\719f\6089\6a21\6837";  }
.edlyrics p:nth-child(17):after{  content:"\90fd\65e0\9700\518d\8bb2";  }

.edlyrics p:nth-child(19):after{  content:"\4ed6\4f1a\5728\8eab\65c1";  }
.edlyrics p:nth-child(20):after{  content:"\4ed6\4f1a\662f\8fdc\65b9";  }
.edlyrics p:nth-child(21):after{  content:"\4ed6\5c31\662f\5c5e\4e8e\6211\4e00\4e2a\4eba\7684\9633\5149";  }
.edlyrics p:nth-child(22):after{  content:"\54ea\6015\65f6\95f4 \4f1a\5f88\6f2b\957f";  }
.edlyrics p:nth-child(23):after{  content:"\5982\540c \5f80\5e38";  }

.edlyrics p:nth-child(25):after{  content:"\8fde\7ebf\662f\70b9\8fde\6210\7ebf";  }
.edlyrics p:nth-child(26):after{  content:"\4e00\773c\662f\6700\540e\4e00\773c";  }
.edlyrics p:nth-child(27):after{  content:"\4f60\5c31\5728\6211\9762\524d";  }
.edlyrics p:nth-child(28):after{  content:"\6211\5374\53ea\80fd\60f3\5ff5";  }

.edlyrics p:nth-child(30):after{  content:"\4ed6\53ea\5728\5fc3\4e0a";  }
.edlyrics p:nth-child(31):after{  content:"\4ed6\53ea\662f\4fe1\4ef0";  }
.edlyrics p:nth-child(32):after{  content:"\4ed6\53ea\662f\4e00\4e2a\4eba\8d70";  }
.edlyrics p:nth-child(33):after{  content:"\5728\54ea\4e2a\5730\65b9\6d41\6d6a";  }
.edlyrics p:nth-child(34):after{  content:"\5ff5\4ed6\719f\6089\6a21\6837";  }
.edlyrics p:nth-child(35):after{  content:"\90fd\65e0\9700\518d\8bb2";  }

.edlyrics p:nth-child(37):after{  content:"\4ed6\4f1a\5728\8eab\65c1";  }
.edlyrics p:nth-child(38):after{  content:"\4ed6\4f1a\662f\8fdc\65b9";  }
.edlyrics p:nth-child(39):after{  content:"\4ed6\5c31\662f\5c5e\4e8e\6211\4e00\4e2a\4eba\7684\9633\5149";  }
.edlyrics p:nth-child(40):after{  content:"\54ea\6015\65f6\95f4 \4f1a\5f88\6f2b\957f";  }
.edlyrics p:nth-child(41):after{  content:"\5982\540c \5f80\5e38";  }

.edlyrics p:nth-child(43):after{  content:"\966a\4f60\53bb\8fdc\822a";  }
.edlyrics p:nth-child(44):after{  content:"\6545\4e8b\603b\662f\505c\5728\8fc7\5f80";  }
.edlyrics p:nth-child(45):after{  content:"\4e00\6b65\6b65\6210\957f";  }
.edlyrics p:nth-child(46):after{  content:"\53bb\6211\4eec\6700\60f3\53bb\7684\5730\65b9";  }

.edlyrics p:nth-child(48):after{  content:"\4ed6\53ea\5728\5fc3\4e0a";  }
.edlyrics p:nth-child(49):after{  content:"\4ed6\53ea\662f\4fe1\4ef0";  }
.edlyrics p:nth-child(50):after{  content:"\4ed6\53ea\662f\4e00\4e2a\4eba\8d70";  }
.edlyrics p:nth-child(51):after{  content:"\5728\54ea\4e2a\5730\65b9\6d41\6d6a";  }
.edlyrics p:nth-child(52):after{  content:"\5ff5\4ed6\719f\6089\6a21\6837";  }
.edlyrics p:nth-child(53):after{  content:"\90fd\65e0\9700\518d\8bb2";  }

.edlyrics p:nth-child(55):after{  content:"\4ed6\4f1a\5728\8eab\65c1";  }
.edlyrics p:nth-child(56):after{  content:"\4ed6\4f1a\662f\8fdc\65b9";  }
.edlyrics p:nth-child(57):after{  content:"\4ed6\5c31\662f\5c5e\4e8e\6211\4e00\4e2a\4eba\7684\9633\5149";  }
.edlyrics p:nth-child(58):after{  content:"\54ea\6015\65f6\95f4 \4f1a\5f88\6f2b\957f";  }
.edlyrics p:nth-child(59):after{  content:"\5982\540c \5f80\5e38";  }

.edlyrics p:nth-child(61):after{  content:"\53ea\60f3\4e0e\4f60 \643a\624b\5e76\80a9";  }
.edlyrics p:nth-child(62):after{  content:"\5982\613f \4ee5\507f";  }

.shengming p:nth-child(2):after{  content:"\672c\4f5c\54c1\4e2d\4f5c\7528\97f3\4e50\ff0c\97f3\6548\7b49\7d20\6750\5747\6765\81ea\4e92\8054\7f51\ff0c\8457\4f5c\6743\5f52\539f\8457\4f5c\6743\4eba\6240\6709\3002";  }
.shengming p:nth-child(3):after{  content:"\672c\4f5c\54c1\4ec5\4f9b\540c\597d\4ea4\6d41\6b23\8d4f\4e4b\7528\ff0c\8bf7\52ff\8fdb\884c\4e8c\6b21\4fee\6539\ff0c\65e0\6388\6743\8f6c\8f7d\4ee5\53ca\4efb\4f55\5546\4e1a\7528\9014\3002";  }


  .edlyrics::-webkit-scrollbar {
              width: 12px;
              background-color: rgba(51,51,51,0.2);
          }
  .edlyrics::-webkit-scrollbar-track {
              background-color: rgba(51,51,51,0.2);
          }
  .edlyrics::-webkit-scrollbar-thumb {
              background: rgba(204,204,204,0.6);
          }

          /*lantern animation powered by https://codepen.io/thewizardjs/pen/NWWgzPm MIT Licensed*/
            .light {
              transform: translate(60%, 50%);
              height: 80px;
              width: 80px;
              position: absolute;
              border-radius: 50%;
              background: #ffdd1b;
              box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ffdd1b,
                0 0 70px #ffdd1b, 0 0 80px #ffdd1b, 0 0 100px #ffdd1b, 0 0 150px #ffdd1b;
              animation: blink 5s ease-in-out infinite;
            }
            .lantern {
            perspective: 500px;
            height: 150px;
            width: 180px;
            animation: floating 3s ease-in-out infinite;
          }
          .right {
            opacity: 0.9;
            background: #ffe557;
            height: 185px;
            width: 112px;
            transform: rotateY(400deg) translateX(116px) translateY(-172px);
          }
          .left {
            opacity: 0.9;
            background: #ffbd66;
            height: 160px;
            width: 100px;
            transform: rotateY(137deg) translateX(-20px) scaleY(0.98);
          }
          @keyframes blink {
            0% {
              opacity: 1;
            }

            50% {
              opacity: 0.5;
            }

            100% {
              opacity: 1;
            }
          }
          @keyframes floating {
            0% {
              transform: translate3d(0, 0, 0);
            }
            45% {
              transform: translate3d(0, -10%, 0);
            }
            55% {
              transform: translate3d(0, -10%, 0);
            }
            100% {
              transform: translate3d(0, 0, 0);
            }
          }
          .flame {
            opacity: 0.7;
            left: 40%;
            bottom: 0;
            position: absolute;
            width: 20px;
            height: 20px;
            background: linear-gradient(-45deg, red, orange);
            border-radius: 150px 150px 0px 150px;
            transform: rotate(-135deg);
            animation: 0.1s flame infinite;
            filter: blur(10px);
            box-shadow: 17px 20px 90px #700;
            border-left-width: 25px;
            border-top-width: 25px;
          }
          .flame:after,.flame:before {
              content: "";
              width: 20px;
              height: 20px;
              display: block;
              position: absolute;
              background: linear-gradient(-45deg, red, orange);
              animation: 0.2s flame infinite;
              transform: scale(0.8) rotate(20deg);
              border-radius: 100px 100px 0px 100px;
              top: 20px;
            }
            .flame:before {
              top: 0;
              animation-duration: 0.09s;
              transform: scale(0.9) rotate(-15deg) translate(10px, 0px);
            }
            @keyframes flame {
            0% {
              height: 20px;
              width: 20px;
            }
            50% {
              height: 30px;
              width: 30px;
            }
            100% {
              height: 20px;
              width: 20px;
            }
          }
